<template>
  <div>
    <van-nav-bar class="iframe-header van-nav-bar_none"
                 :title="$route.query.title">
      <div slot="left"
           class="left">
        <van-icon name="arrow-left"
                  @click="prev" />
        <van-icon name="close"
                  @click="close" />
      </div>
      <van-icon name="sangedian"
                @click="menu"
                slot="right"
                style="margin-top:-10px;" />
    </van-nav-bar>
    <div class="iframe-weaper">
      <iframe v-if="$route.query.src"
              :src='src'
              class="iframe"
              ref="iframe"></iframe>
      <iframe v-else
              :src="urlPath"
              class="iframe"
              ref="iframe"></iframe>
    </div>
    <share-menu ref="share"
                v-model="menuShow"
                @wechat="wechat"></share-menu>
    <van-actionsheet v-model="menuFlag"
                     :actions="actions"
                     cancel-text="取消" />
  </div>
</template>

<script>
import { mapState, mapGetters } from 'vuex';
import shareMenu from '@/components/share/main';
import NProgress from 'nprogress'; // progress bar
import 'nprogress/nprogress.css'
  ;
// progress bar style
export default {
  name: 'AvueIframe',
  components: {
    shareMenu,
  },
  data () {
    return {
      urlPath: this.getUrlPath(), // iframe src 路径
      menuFlag: false,
      menuShow: false,
      src: '',
      backSrc: '',
      actions: [
        {
          name: '刷新',
          callback: this.refresh,
        },
        {
          name: '分享',
          callback: this.share,
        },
      ],
    };
  },
  created () {
    NProgress.configure({ showSpinner: false });
  },
  mounted () {
    this.load();
    this.resize();
  },
  props: ['routerPath'],
  watch: {
    $route () {
      this.load();
    },
    routerPath (val) {
      // 监听routerPath变化，改变src路径
      this.urlPath = this.getUrlPath();
    },
  },
  methods: {
    wechat (item) {
      const title = this.$route.query.title,
        href = this.$route.query.src;
      this.$refs.share
        .wechatShare(Object.assign({
          title,
          href,
          description: '来自蜂鸟智慧物业的分享',
        }, item.query))
        .then((res) => {
          this.$message.success({
            message: '分享成功',
            duration: 1500,
          });
        });
    },
    menu () {
      this.menuFlag = true;
    },
    share () {
      this.menuShow = true;
      this.menuFlag = false;
    },
    refresh () {
      this.src = '#';
      setTimeout(() => {
        this.load();
        this.menuFlag = false;
      }, 0);
    },
    prev () {
      if (this.backSrc) {
        this.$router.replace({ path: this.backSrc });
        return;
      }
      this.$router.goBack();
    },
    close () {
      if (this.backSrc) {
        this.$router.replace({ path: this.backSrc });
        return;
      }
      const path = this.$router.hisPath.path;
      const query = this.$router.hisPath.query;
      this.$router.replace({ path, query });
    },
    // 显示等待框
    show () {
      NProgress.start();
    },
    // 隐藏等待狂
    hide () {
      NProgress.done();
    },
    // 加载浏览器窗口变化自适应
    resize () {
      window.onresize = () => {
        this.iframeInit();
      };
    },
    // 加载组件
    load () {
      this.show();
      this.$route.query.src = this.$route.query.src
        ? this.$route.query.src.replace('$', '#')
        : '';

      this.src = this.$route.query.src;
      this.backSrc = this.$route.query.backSrc;
      // 超时3s自动隐藏等待狂，加强用户体验
      let time = 3;
      const timeFunc = setInterval(() => {
        time--;
        if (time == 0) {
          this.hide();
          clearInterval(timeFunc);
        }
      }, 1000);
      this.iframeInit();
    },
    // iframe窗口初始化
    iframeInit () {
      const iframe = this.$refs.iframe;
      const clientHeight = document.documentElement.clientHeight - 44;
      iframe.style.height = `${clientHeight}px`;
      if (iframe.attachEvent) {
        iframe.attachEvent('onload', () => {
          this.hide();
        });
      } else {
        iframe.onload = () => {
          this.hide();
        };
      }
    },
    getUrlPath () {
      // 获取 iframe src 路径
      let url = window.location.href;
      url = url.replace('/iframe', '');
      return url;
    },
  },
};
</script>

<style lang="scss">
.iframe {
  &-header {
    .left {
      i {
        margin-right: 8px;
      }
    }
  }
  &-weaper {
  }
}
.iframe {
  width: 100%;
  height: 100%;
  border: 0;
  overflow: hidden;
  box-sizing: border-box;
}
</style>